<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="canvas"></canvas>
</body>
<script type="text/javascript">
	var searchLight={x:400,y:400,radius:200,vx:Math.random()*5+10,vy:Math.random()*5+10}
	var rot=0;
	window.onload=function(){
		var canvas=document.getElementById('canvas');
		canvas.width=800;
		canvas.height=800;
		var context=canvas.getContext('2d');
		setInterval(function(){
			draw(context);
			update(canvas.width,canvas.height);
		},40)

	}
	function draw(cxt){
		//黑色屏幕
		var canvas=cxt.canvas;
		cxt.clearRect(0,0,canvas.width,canvas.height);
		cxt.save();
		cxt.beginPath();
		cxt.rect(0,0,canvas.width,canvas.height);
		cxt.fillStyle="black";
		cxt.fill();
		cxt.closePath();
		cxt.restore();
		//白色校园
		cxt.save();
		cxt.beginPath();
		cxt.arc(searchLight.x,searchLight.y,searchLight.radius,0,2*Math.PI);
		cxt.fillStyle="#FFF";
		cxt.fill();
		cxt.clip();
		//文字
		cxt.font="bold 144px Arial";
		cxt.textAlign="center";
		cxt.textBaseLine="middle"
		cxt.fillStyle="red";
		cxt.fillText("canvddddddddddddddas",canvas.width/2,canvas.height/4);
		cxt.fillText("canvddddddddddddddas",canvas.width/2,canvas.height/2);
		cxt.fillText("canvddddddddddddddas",canvas.width/2,canvas.height*3/4);
		cxt.restore();
	}
	function update(canvasWidth,canvasHeight){
		searchLight.x+=searchLight.vx;
		searchLight.y+=searchLight.vy;
		if(searchLight.x-searchLight.radius<=0){
			searchLight.vx=-searchLight.vx;
			searchLight.x=searchLight.radius;
		}
		if(searchLight.x+searchLight.radius>=canvasWidth){
			searchLight.vx=-searchLight.vx;
			searchLight.x=canvasWidth-searchLight.radius;
		}
		if(searchLight.y-searchLight.radius<=0){
			searchLight.vy=-searchLight.vy;
			searchLight.y=searchLight.radius;
		}
		if(searchLight.y+searchLight.radius>=canvasHeight){
			searchLight.vy=-searchLight.vy;
			searchLight.y=canvasHeight-searchLight.radius;
		}
	}
</script>
</html>